<template>
  <div class="mui-content">
    <div class="mui-pages">
      <header class="mui-bar mui-bar-nav">
        <div class="header-common-title flex-justify-start">
          <div class="mui-action-back">
            <img
              @click="fn.back()"
              class="back-btn"
              src="../../../../static/images/back.png"
            />
          </div>
          <div class="header-search flex-center">党员学习补开申请</div>
        </div>
      </header>
      <div class="mui-page-content">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll-wrapper work-message-lists">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div class="" v-for="(item, index) in list" :key="index">
                    <cube-swipe-item
                      ref="swipeItem"
                      :index="index"
                      class="swiper-no-swiping"
                    >
                      <p class="history-message flex-center">
                        {{ fn.formateYearSecond(item.BEFORE_BEGIN_TIME_) }}
                      </p>
                      <div class="work-message-item">
                        <div class="work-message-item-title">
                          <h5>{{ item.PARTY_GORUP_NAME_ }}集体学习补开申请</h5>
                          <p class="schedule-item-world">
                            <b>审批结果：</b
                            ><span
                              :class="{
                                'mine-lists-money':
                                  item.PATCHUP_STATUS_ != '同意',
                              }"
                              class="work-blue"
                              >{{ item.PATCHUP_STATUS_ }}</span
                            >
                          </p>
                        </div>
                        <div
                          class="flex-between-center message-details"
                          @click="detail(item)"
                        >
                          <p>查看详情</p>
                          <span class="mui-icon mui-icon-arrowright"></span>
                        </div>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <noData v-if="!isLoading && list.length == 0"></noData> -->
              <!-- W noData -->
              <noData v-if="!isLoading && list.length == 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
export default {
  name: "",
  data() {
    return {
      fn: tools,
      countData: {
        dwbPactchUpApprovaCount: 0,
      }, // 数量
      list: [],
      isLoading: false,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      pageIndex: 0,
      type: "approve", // approve:审批申请，approveHistory:审批记录
    };
  },
  created() {
    this.type = this.$route.params.type || "approve";
    this.loadData();
  },
  methods: {
    jump(type) {
      this.$router.replace({ path: "/approve/" + type });
    },
    detail(item) {
      console.log(item);
      this.$store.state["patchApproveDetails" + item.ID_] = item;
      this.$router.push({ path: "/patchApproveDetails/" + item.ID_ });
    },
    onPullingUp() {
      this.loadData();
    },
    loadData() {
      let data = {
        pageSize: 10,
        pageIndex: this.pageIndex,
      };
      this.isLoading = true;
      loginService.dwbPactchUpHoveApprovalList(data).then((res) => {
        this.isLoading = false;
        this.pageIndex++;
        if (res.code !== 200) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip(res.message);
        }
        if (res.code === 200 && res.data.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("数据已加载完");
        }
        this.list = this.list.concat(res.data);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
  },
  watch: {
    $route(to, from) {
      this.type = to.params.type;
    },
  },
};
</script>

<style scoped lang="">
</style>


